<template>
	<view style="padding: 40rpx;">
		<view class="itemInputStyle">
			<input type="text" v-model="email" placeholder="请输入邮箱" />
		</view>
		<view class="itemInputStyle">
			<input type="safe-password" v-model="newPwd" placeholder="请输入新密码" />
		</view>
		<view class="itemInputStyle">
			<input type="safe-password" v-model="newPwd2" placeholder="请再次输入新密码" />
		</view>
		<view class="itemInputStyle" style="display: flex;">
			<view>
				<input type="safe-password" v-model="code" placeholder="请输入邮箱验证码" />
			</view>
			<view class="getCodeStyle">
				<text @tap="handleGetCode()" v-if="codeState==1">获取邮箱验证码</text>
				<text v-else-if="codeState==2">({{time}})秒后重试</text>
				<text @tap="handleGetCode()" v-else>重新获取</text>
			</view>
		</view>
		<view style="margin: 30rpx auto;">
			<button class="btnStyle" @tap="changePwd()">确认修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email:"",
				codeState: 1, //1为获取按钮 2为倒计时显示 3为重新获取
				newPwd:"",
				newPwd2:"",
				time: 120, //倒计时的次数
				code: "",
				codeLock: false
			}
		},
		methods: {
			validatePassword(password) {
			  // 检查密码长度是否符合要求  
			  if (password.length < 6 || password.length > 10) {  
			    return false;  
			  }  
			  // 检查密码是否只包含数字或存字符  
			  if (/^[\d\W]+$/.test(password)) {  
			    return false;  
			  }  
			    
			  // 如果以上条件都符合，则返回 true  
			  return true;  
			},
			async changePwd(){
				var that = this
				//非空校验 
				let err=''
				if(this.newPwd.length>20){
					err = "密码长度过长"
				}
				
				if(that.newPwd != that.newPwd2){
					err = "两次输入密码不一致"
				}
				
				if(that.code == ""){
					err = "请输入验证码"
				}
				
				// if(!this.validatePassword(this.newPwd)){
				// 	err ="密码不为纯字符或纯数字且最小不小于6位"
				// }
				if (that.newPwd == "") {
					err = "密码不为空"
				}	
				
				if(err){
					uni.showToast({
						title:err,
						icon:'none'
					})
					return
				}
				console.log("发起修改密码请求")
				const data = await this.$http('/appapi/auth/change_pwd', {
					email : this.email,
					verify:this.code,
					password:this.newPwd
				})
				uni.showToast({
					title:data.msg,
					icon:'none'
				})
			},
			async sendCodeValue(){
				console.log("发送验证码请求")
				const data = await this.$http('/appapi/auth/send_email_verify', {
					email : this.email
				})
				console.log(data)
				uni.showToast({
					title:data.msg,
					icon:'none'
				})
			},
			handleGetCode() {
				var that=this
				let error=''
				let emailReg = /^[\w-]+(.[\w-]+)*@[\w-]+(.[\w-]+)+$/
				if(!emailReg.test(that.email)) {
					error = "邮箱格式错误"
				}
				if(that.email == "") {
					error = "邮箱不为空"
				}
				if(error) {
					uni.showToast({
						title: error,
						icon: 'none',
					})
					return;
				}
				var that = this
				if (this.codeLock) {
					uni.showToast({
						title: "已经发送验证码,请打开邮箱查看，请勿重复获取",
						icon: 'none'
					})
					return;
				}else{
					//发送获取验证码请求
					this.codeState = 2
					that.codeLock = true
					this.sendCodeValue()
					var t = setInterval(function() {
						console.log("setInterval", that.time)
						if (that.time > 0) {
							console.log(that.time)
							that.time--
						} else {
							clearInterval(t);
							that.codeState = 3
							that.time = 120;
							that.codeLock = false
						}
					}, 1000);
				}
			},
		}
	}
</script>

<style  lang="scss" scoped>
	$themeColor: #FA97B4;
	.btnStyle{
		background-color: $themeColor;color: #fff;
	}	
	.getCodeStyle{
		white-space: nowrap;
		padding: 20rpx;color: $themeColor;
	}
	.itemInputStyle{
		border-bottom: 1px solid #e2e2e2;
	}
	.itemInputStyle input{
		padding: 20rpx;
	}
</style>